<template>
  <div class="home-content">
    <div class="m-statistical">
      <Row :gutter="8">
        <Col span="4">
          <Card> <span class="m-content-title">商品总量：</span> {{ goodsNum.goods }}</Card>
        </Col>
        <Col span="4">
          <Card> <span class="m-content-title">上架商品总量：</span> {{ goodsNum.goods_shelves }}</Card>
        </Col>
        <Col span="4">
          <Card><span class="m-content-title">下架商品总量：</span> {{ goodsNum.goods_noshelves }}</Card>
        </Col>
        <!-- <Col>
        <div><Button @click="refresh">刷新</Button></div>
      </Col> -->
        <Col span="6">
          <Card> <span class="m-content-title">总销售额：</span>{{ goodsNum.order_price.sum_price.toFixed(2) }}元 </Card>
        </Col>
        <Col span="4">
          <Card> <span class="m-content-title">总订单量：</span>{{ goodsNum.order }}</Card>
        </Col>
      </Row>
    </div>

    <Row :gutter="8">
      <Col>
        <Card title="商品近期销售额">
          <line-echarts :dayOrder="dayOrder"></line-echarts>
        </Card>
      </Col>
      <Col span="8">
        <Card title="销售量排行榜" :padding="10" shandw>
          <div class="order-list">
            <CellGroup>
              <Cell
                :name="item.name"
                v-for="(item, index) in orderList"
                :key="item.index"
                :title="index + 1 + '.' + item.name"
                :extra="item.sum + item.unit"
              ></Cell>
            </CellGroup>
          </div>
        </Card>
      </Col>
    </Row>
    <Row>
      <Col span="9">
        <div class="type-goods-box">
          <Card title="商品结构">
            <circular-echarts :typeGoods="typeGoods"></circular-echarts>
          </Card>
        </div>
      </Col>
      <Col span="13">
        <div class="sum-goods-box">
          <Card title="商品库存" :padding="0">
            <Table stripe :columns="columns1" :data="goodsinventory"></Table>
          </Card>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'
import {getKey} from '@/utils/utils'
import Line from '@/views/echartsViews/Line/line.vue'
import Circular from '@/views/echartsViews/Circular/circular.vue'

export default {
  components: {
    'line-echarts': Line,
    'circular-echarts': Circular,
  },
  data () {
    return {
      user: '',   // 用户信息
      orderList: [],   // 商品销量排行榜数据
      goodsNum: {
        goods: 0,
        goods_shelves: 0,
        goods_noshelves: 0,
        order_price: {
          sum_price: 0
        },
        order: 0
      },   // 商品数量
      typeGoods: [],   // 商品结构数据
      dayOrder: {
        order_sum: [],
        values: []
      },   // 每日商品销售额
      goodsinventory: [],   // 商品库存
      columns1: [
        {
          type: 'index',
          title: '序号',
          width: 80,
          align: 'center',
        },
        {
          key: 'picture',
          title: '图片',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Avatar', {
                props: {
                  src: 'http://127.0.0.1:8000' + params.row.url,
                  size: "large",
                  shape: "square"
                },
              })
            ])
          }
        },
        {
          title: '商品名称',
          key: 'name',
          align: 'center',
        },
        {
          title: '库存',
          key: 'values',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('span', params.row.values + params.row.unit)
            ])
          }
        }
      ],
    }
  },
  computed: {
    ...mapState({
      // 菜单数据
      categoryList: (state) => {
        return state.home.categoryList
      }
    })
  },
  mounted () {
    this.refresh()
  },
  methods: {
    // 刷新数据
    refresh () {
      // 获取用户信息
      this.user = getKey('userinfo')
      this._getOrderList()
      this._getGoodsNum()
      this._getTypeGoods()
      this._getDayOrder()
      this._getGoodsInventory()
    },
    // 获取商品销量排行榜
    async _getOrderList () {
      const url = '/orderlist'
      const res = await this.GET_DATA({
        dataUrl: url
      })
      if (res) {
        this.$nextTick(() => {
          this.orderList = res.data
        })
      }
    },
    // 获取商品数量
    async _getGoodsNum () {
      const url = '/getgoodsnum'
      const res = await this.GET_DATA({
        dataUrl: url
      })
      if (res) {
        this.$nextTick(() => {
          this.goodsNum = res.data
        })
      }
    },
    // 获取商品结构
    async _getTypeGoods () {
      const url = '/gettypegoods'
      const res = await this.GET_DATA({
        dataUrl: url
      })
      if (res) {
        this.$nextTick(() => {
          this.typeGoods = res.data
        })
      }
    },
    // 获取商品库存
    async _getGoodsInventory () {
      const url = '/getgoodsinventory'
      const res = await this.GET_DATA({
        dataUrl: url
      })
      if (res) {
        this.$nextTick(() => {
          this.goodsinventory = res.data
        })
      }
    },
    // 获取每日商品销售额
    async _getDayOrder () {
      const url = '/getdayorder'
      const res = await this.GET_DATA({
        dataUrl: url
      })
      if (res) {
        this.$nextTick(() => {
          this.dayOrder = {
            order_sum: res.data.order_sum.reverse(),
            values: res.data.values.reverse()
          }
        })
      }
    },
    // 获取菜单数据
    // _getTest () {
    //   this.$store.dispatch('getCategoryList')
    // },
    ...mapActions({
      GET_DATA: '_GET_DATA'
    })
  },
}
</script>

<style lang="scss" scoped>
.home-content {
  margin-left: 20px;
  .m-statistical {
    margin-bottom: 10px;
    .m-content-title {
      font-weight: bold;
    }
  }
  .type-goods-box,
  .sum-goods-box {
    margin-top: 10px;
    margin-right: 10px;
  }
}
/deep/ .ivu-card-head p span {
  color: #515a6e;
  font-weight: bold;
}
.order-list {
  height: 262px;
}
</style>